<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .defense {
                width: 550px;
                height: 420px;
                background: #eee;
                position: relative;
            }

            .week-day {
                height: 60px;
                width: 100%;
            }

            .week-day:nth-child(even) {
                background: #eee;
            }

            .week-day:nth-child(odd) {
                background: #ccc;
            }

            .line {
                display: block;
                float: left;
                height: 10px;
                width: 19px;
                border-left: 1px solid #000;
            }

            .hour {
                display: block;
                float: left;
                height: 10px;
                width: 20px;
                font-size: 12px;
                text-align: left;
            }

            .time-num {
                overflow: hidden;
                height: 20px;
            }

            .w-left {
                float: left;
                width: 50px;
                height: 60px;
                font-size: 12px;
                text-align: center;
                line-height: 60px;
            }

            .w-right: {
                float: right;
                width: 500px;
                height: 50px;
            }

            .w-right .time-bor {
                height: 10px;
                margin-left: 2px;
                width: 500px;
                overflow: hidden;
            }

            .time-pro {
                height: 8px;
                margin-top: 5px;
                margin-right: 17px;
                width: 476px;
                border: 1px solid #bbb;
                background: #fff;
                float: right;
                position: relative;
            }

            .pro-mc {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                z-index: 10;
            }

            .ri_it {
                display: none;
                height: 90px;
                width: 200px;
                box-shadow: 1px 1px #ccc;
                z-index: 50;
                position: absolute;
                background: #fff;
            }

            .ri_time input {
                height: 20px;
                width: 30px;
                outline: none;
                text-align: center;
            }

            .ri_time {
                height: 30px;
                width: 100%;
                margin-top: 10px;
                padding-left: 12px;
            }

            .ri_it a {
                text-decoration: none;
            }

            .ri_btn {
                height: 30px;
                text-align: center;
                widht: 100%;
                margin-top: 10px;
            }
        </style>
    </head>

    <body>
        <div class="defense">
            <div class="mon week-day">
                <div class="w-left">星期一</div>
                <div class="w-right">
                    <div class="time-num">
                        <span class="hour">0</span>
                        <span class="hour">1</span>
                        <span class="hour">2</span>
                        <span class="hour">3</span>
                        <span class="hour">4</span>
                        <span class="hour">5</span>
                        <span class="hour">6</span>
                        <span class="hour">7</span>
                        <span class="hour">8</span>
                        <span class="hour">9</span>
                        <span class="hour">10</span>
                        <span class="hour">11</span>
                        <span class="hour">12</span>
                        <span class="hour">13</span>
                        <span class="hour">14</span>
                        <span class="hour">15</span>
                        <span class="hour">16</span>
                        <span class="hour">17</span>
                        <span class="hour">18</span>
                        <span class="hour">19</span>
                        <span class="hour">20</span>
                        <span class="hour">21</span>
                        <span class="hour">22</span>
                        <span class="hour">23</span>
                        <span class="hour">24</span>
                    </div>
                    <div class="time-bor">
                        <i class="line" style="margin-left: 3px"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line" style="width: 10px; height: 10px"></i>
                    </div>
                    <div class="time-pro">
                        <div class="pro-mc"></div>
                    </div>
                </div>
            </div>

            <div class="tue week-day">
                <div class="w-left">星期二</div>
                <div class="w-right">
                    <div class="time-num">
                        <span class="hour">0</span>
                        <span class="hour">1</span>
                        <span class="hour">2</span>
                        <span class="hour">3</span>
                        <span class="hour">4</span>
                        <span class="hour">5</span>
                        <span class="hour">6</span>
                        <span class="hour">7</span>
                        <span class="hour">8</span>
                        <span class="hour">9</span>
                        <span class="hour">10</span>
                        <span class="hour">11</span>
                        <span class="hour">12</span>
                        <span class="hour">13</span>
                        <span class="hour">14</span>
                        <span class="hour">15</span>
                        <span class="hour">16</span>
                        <span class="hour">17</span>
                        <span class="hour">18</span>
                        <span class="hour">19</span>
                        <span class="hour">20</span>
                        <span class="hour">21</span>
                        <span class="hour">22</span>
                        <span class="hour">23</span>
                        <span class="hour">24</span>
                    </div>
                    <div class="time-bor">
                        <i class="line" style="margin-left: 3px"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line" style="width: 10px; height: 10px"></i>
                    </div>
                    <div class="time-pro">
                        <div class="pro-mc"></div>
                    </div>
                </div>
            </div>

            <div class="wed week-day">
                <div class="w-left">星期三</div>
                <div class="w-right">
                    <div class="time-num">
                        <span class="hour">0</span>
                        <span class="hour">1</span>
                        <span class="hour">2</span>
                        <span class="hour">3</span>
                        <span class="hour">4</span>
                        <span class="hour">5</span>
                        <span class="hour">6</span>
                        <span class="hour">7</span>
                        <span class="hour">8</span>
                        <span class="hour">9</span>
                        <span class="hour">10</span>
                        <span class="hour">11</span>
                        <span class="hour">12</span>
                        <span class="hour">13</span>
                        <span class="hour">14</span>
                        <span class="hour">15</span>
                        <span class="hour">16</span>
                        <span class="hour">17</span>
                        <span class="hour">18</span>
                        <span class="hour">19</span>
                        <span class="hour">20</span>
                        <span class="hour">21</span>
                        <span class="hour">22</span>
                        <span class="hour">23</span>
                        <span class="hour">24</span>
                    </div>
                    <div class="time-bor">
                        <i class="line" style="margin-left: 3px"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line" style="width: 10px; height: 10px"></i>
                    </div>
                    <div class="time-pro">
                        <div class="pro-mc"></div>
                    </div>
                </div>
            </div>

            <div class="thu week-day">
                <div class="w-left">星期四</div>
                <div class="w-right">
                    <div class="time-num">
                        <span class="hour">0</span>
                        <span class="hour">1</span>
                        <span class="hour">2</span>
                        <span class="hour">3</span>
                        <span class="hour">4</span>
                        <span class="hour">5</span>
                        <span class="hour">6</span>
                        <span class="hour">7</span>
                        <span class="hour">8</span>
                        <span class="hour">9</span>
                        <span class="hour">10</span>
                        <span class="hour">11</span>
                        <span class="hour">12</span>
                        <span class="hour">13</span>
                        <span class="hour">14</span>
                        <span class="hour">15</span>
                        <span class="hour">16</span>
                        <span class="hour">17</span>
                        <span class="hour">18</span>
                        <span class="hour">19</span>
                        <span class="hour">20</span>
                        <span class="hour">21</span>
                        <span class="hour">22</span>
                        <span class="hour">23</span>
                        <span class="hour">24</span>
                    </div>
                    <div class="time-bor">
                        <i class="line" style="margin-left: 3px"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line" style="width: 10px; height: 10px"></i>
                    </div>
                    <div class="time-pro">
                        <div class="pro-mc"></div>
                    </div>
                </div>
            </div>

            <div class="fri week-day">
                <div class="w-left">星期五</div>
                <div class="w-right">
                    <div class="time-num">
                        <span class="hour">0</span>
                        <span class="hour">1</span>
                        <span class="hour">2</span>
                        <span class="hour">3</span>
                        <span class="hour">4</span>
                        <span class="hour">5</span>
                        <span class="hour">6</span>
                        <span class="hour">7</span>
                        <span class="hour">8</span>
                        <span class="hour">9</span>
                        <span class="hour">10</span>
                        <span class="hour">11</span>
                        <span class="hour">12</span>
                        <span class="hour">13</span>
                        <span class="hour">14</span>
                        <span class="hour">15</span>
                        <span class="hour">16</span>
                        <span class="hour">17</span>
                        <span class="hour">18</span>
                        <span class="hour">19</span>
                        <span class="hour">20</span>
                        <span class="hour">21</span>
                        <span class="hour">22</span>
                        <span class="hour">23</span>
                        <span class="hour">24</span>
                    </div>
                    <div class="time-bor">
                        <i class="line" style="margin-left: 3px"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line" style="width: 10px; height: 10px"></i>
                    </div>
                    <div class="time-pro">
                        <div class="pro-mc"></div>
                    </div>
                </div>
            </div>

            <div class="sat week-day">
                <div class="w-left">星期六</div>
                <div class="w-right">
                    <div class="time-num">
                        <span class="hour">0</span>
                        <span class="hour">1</span>
                        <span class="hour">2</span>
                        <span class="hour">3</span>
                        <span class="hour">4</span>
                        <span class="hour">5</span>
                        <span class="hour">6</span>
                        <span class="hour">7</span>
                        <span class="hour">8</span>
                        <span class="hour">9</span>
                        <span class="hour">10</span>
                        <span class="hour">11</span>
                        <span class="hour">12</span>
                        <span class="hour">13</span>
                        <span class="hour">14</span>
                        <span class="hour">15</span>
                        <span class="hour">16</span>
                        <span class="hour">17</span>
                        <span class="hour">18</span>
                        <span class="hour">19</span>
                        <span class="hour">20</span>
                        <span class="hour">21</span>
                        <span class="hour">22</span>
                        <span class="hour">23</span>
                        <span class="hour">24</span>
                    </div>
                    <div class="time-bor">
                        <i class="line" style="margin-left: 3px"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line" style="width: 10px; height: 10px"></i>
                    </div>
                    <div class="time-pro">
                        <div class="pro-mc"></div>
                    </div>
                </div>
            </div>

            <div class="sun week-day">
                <div class="w-left">星期天</div>
                <div class="w-right">
                    <div class="time-num">
                        <span class="hour">0</span>
                        <span class="hour">1</span>
                        <span class="hour">2</span>
                        <span class="hour">3</span>
                        <span class="hour">4</span>
                        <span class="hour">5</span>
                        <span class="hour">6</span>
                        <span class="hour">7</span>
                        <span class="hour">8</span>
                        <span class="hour">9</span>
                        <span class="hour">10</span>
                        <span class="hour">11</span>
                        <span class="hour">12</span>
                        <span class="hour">13</span>
                        <span class="hour">14</span>
                        <span class="hour">15</span>
                        <span class="hour">16</span>
                        <span class="hour">17</span>
                        <span class="hour">18</span>
                        <span class="hour">19</span>
                        <span class="hour">20</span>
                        <span class="hour">21</span>
                        <span class="hour">22</span>
                        <span class="hour">23</span>
                        <span class="hour">24</span>
                    </div>
                    <div class="time-bor">
                        <i class="line" style="margin-left: 3px"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line"></i>
                        <i class="line" style="width: 10px; height: 10px"></i>
                    </div>
                    <div class="time-pro">
                        <div class="pro-mc"></div>
                    </div>
                </div>
            </div>
            <!-- <div class="ri_it">
                <div class="ri_time">
                    <input type="text" class="sh" maxlength="2" /> : <input
                        type="text"
                        class="sm"
                        maxlength="2"
                    /> - 
                    <input type="text" class="eh" maxlength="2" /> : <input
                        type="text"
                        class="em"
                        maxlength="2"
                    />
                </div>
                <div class="ri_btn">
                    <a href="javascript:;" class="ri_close"> close</a> | <a
                        href="javascript:;"
                        class="ri_save"
                        >save</a
                    >
                </div>
            </div> -->
        </div>
    </body>
    <script>
        var arr_tab = [
            [{}, {}, {}, {}, {}, {}, {}, {}],
            [{}, {}, {}, {}, {}, {}, {}, {}],
            [{}, {}, {}, {}, {}, {}, {}, {}],
            [{}, {}, {}, {}, {}, {}, {}, {}],
            [{}, {}, {}, {}, {}, {}, {}, {}],
            [{}, {}, {}, {}, {}, {}, {}, {}],
            [{}, {}, {}, {}, {}, {}, {}, {}],
        ];

        var defense = function (arr_tab) {
            this.arr_tab = arr_tab;

            this.init();
            this.do();
            // this.save();
        };
        defense.prototype = {
            init: function () {
                document.oncontextmenu = function () {
                    return false; //取消右键默认事件
                };
                $(".ri_close").click(function () {
                    $(".ri_it").css({
                        display: "none",
                    });
                    //重新绘制进度条
                });
            },
            do: function () {
                //逻辑效果处理
                var flag = false;
                // var pile={};
                // var t=this;
                var obj = {};
                var s = 0;
                var m = 0;
                var t = this;
                var right = "";
                $(".pro-mc").mousedown(function (e) {
                    var e = e || window.event;
                    //**********************************左键点击事件
                    if (e.button != 2) {
                        //console.log(1)
                        if (flag == true) return;
                        var it_num = $(this).parent().find(".main").length; //判断存在的进度条数目
                        var ind1 = $(this).parent().parent().parent().index(); //判断周几
                        m = ind1;
                        //重合处理
                        if (it_num >= 8) {
                            return;
                        }
                        s = it_num + 1; //生成时间段id
                        flag = true;
                        obj.sx = e.offsetX;
                        //判断再输入是否重合
                        $.each(t.arr_tab[ind1], function (index, item) {
                            //遍历处当前的sx和ex;
                            if (!item.sx || !item.ex) {
                                //console.log("no in");
                                return;
                            }
                            if (obj.sx > item.sx && obj.sx < item.ex) {
                                //alert("别重合");
                                flag = false;
                                return;
                            }
                        });

                        if (flag == false) {
                            return;
                        }
                        //*************重合取消创建
                        //********不重合即储存坐标；并且生成条
                        t.arr_tab[ind1][it_num].sx = e.offsetX;
                        var $div = $(
                            '<div class="main  it' +
                                s +
                                '" mark=' +
                                s +
                                "></div>"
                        );
                        $(this).parent().append($div);
                    }
                    //**************************************左键事件结束
                    //*************************************右键点击事件
                    if (e.button == 2) {
                        var obj1 = {};
                        var max_val = 0;
                        $(".ri_it").css({
                            display: "block",
                        });
                        obj1.sx = e.offsetX;
                        var ind = $(this).parent().parent().parent().index();
                        $.each(t.arr_tab[ind], function (index, item) {
                            if (obj1.sx > item.sx && obj1.sx < item.ex) {
                                max_val = max_val > index ? max_val : index;
                            }
                        });
                        console.log(max_val); //右键坐标处mark最大div的index 即当前选中的进度条;
                        var l = $(this)
                            .parent()
                            .find(".main")
                            .eq(max_val)
                            .css("left");
                        var w = $(this)
                            .parent()
                            .find(".main")
                            .eq(max_val)
                            .css("width");
                        l = Number(l.replace("px", ""));
                        w = Number(w.replace("px", ""));
                        console.log(l, w);
                        var st = t.time_form(l / 475);
                        var et = t.time_form((w + l) / 475);
                        $(".sh").val(st.h);
                        $(".eh").val(et.h);
                        $(".sm").val(st.m);
                        $(".em").val(et.m);

                        $(".main").css({
                            background: "blue",
                        });
                        $(this).parent().find(".main").eq(max_val).css({
                            background: "red",
                        });
                        $(".ri_it").css({
                            display: "block",
                            left: e.offsetX + "px",
                            top: e.offsetY + (ind + 1) * 60 - 10 + "px",
                        });
                    }
                });
                $(".pro-mc").mousemove(function (e) {
                    if (flag == false) return;
                    var ind2 = $(this).parent().parent().parent().index();
                    //  console.log(t.arr_tab[ind2]);console.log(ind2)
                    var e = e || window.event;
                    obj.ex = e.offsetX;
                    if (flag == false) return;
                    t.arr_tab[ind2][s - 1].ex = e.offsetX;
                    $(this)
                        .parent()
                        .find(".it" + s + "")
                        .css({
                            height: "100%",
                            position: "absolute",
                            left: obj.sx + "px",
                            width: obj.ex - obj.sx + "px",
                            background: "blue",
                        });
                });
                $(document).mouseup(function () {
                    //console.log(t.arr_tab)假如逆向绘制，取消绘制 ;
                    flag = false;
                    if (t.arr_tab[m][s - 1].ex - t.arr_tab[m][s - 1].sx < 0) {
                        t.arr_tab[m][s - 1].sx = 0;
                        t.arr_tab[m][s - 1].ex = 0;
                        $(".week-day")
                            .eq(m)
                            .find(".main")
                            .eq(s - 1)
                            .remove();
                    }
                });
                $(".ri_save").click(function () {
                    //点击保存，进度条变化
                    $(".ri_it").css({
                        display: "none",
                    });
                    var sh = $(".sh").val();
                    var sm = $(".sm").val();
                    var eh = $(".eh").val();
                    var em = $(".em").val();

                    var st = Number(t.per_form(sh, sm)) * 475;
                    var et = Number(t.per_form(eh, em)) * 475;

                    //m代表周几 s-1代表第几个条index;
                    $(".week-day")
                        .eq(m)
                        .find(".main")
                        .eq(s - 1)
                        .css({
                            left: st + "px",
                            width: et - st + "px",
                        });
                });
            },
            save: function () {
                //数据缓存
                var t = this;
                $(".ri_it input").blur(function () {
                    t.time_flag($(".sh"), "h");
                    t.time_flag($(".eh"), "h");
                    t.time_flag($(".sm"), "m");
                    t.time_flag($(".em"), "m");

                    // 判断时间的合法性
                    if ($(".sh").val() > $(".eh").val()) {
                        console.log("时间不合法");
                        return;
                    }
                    if (
                        $(".sh").val() == $(".eh").val() &&
                        $(".sm").val() > $(".em").val()
                    ) {
                        /*
                    此处判定 分 是否合法
                    */
                        console.log("时间不合法");
                        return;
                    }
                });
            },
            do_del: function (unit, all) {
                //unit删除一行,all全部删除
                if (all) {
                    $.each($(".week-day"), function (index, item) {
                        item.find(".main").remove();
                    });
                }
            },
            do_copy: function (item, arr) {
                //item复制源，arr需复制的id数组
            },
            time_flag: function (item, i) {
                if (i == "h") {
                    if (item.val() > 23) {
                        item.val(23);
                    }
                    if (item.val() < 0) {
                        item.val(0);
                    }
                }
                if (i == "m") {
                    if (item.val() > 59) {
                        item.val(59);
                    }
                    if (item.val() < 0) {
                        item.val(0);
                    }
                }
            },
            time_form: function (per) {
                //输入一个百分比/小数/分数，得出当前百分比时间;86400
                var time = {};
                time.h = parseInt((86400 * per) / 3600);
                time.m = parseInt(((86400 * per) % 3600) / 60);
                return time;
            },
            per_form: function (h, m) {
                //输入一个时间返回百分比/小数/分数;
                return (h * 3600 + m * 60) / 86400;
            },
        };
        var defense = new defense(arr_tab);
    </script>
</html>
<!-- function pao(e){
     event.stopPropagation();
     取消冒泡
} -->
